// https://zhuanlan.zhihu.com/p/524587421
// https://blog.csdn.net/qw8704149/category_11455755.html

#iChannel1 "./apex.jpg"

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec3 colorOutput = vec3(0.0);
    // 如果是单个轴 * N; 可以在X/Y轴上划出三分屏
    // uv.y *= 3.0;

    // 如果是两个轴都 * N; 则会出现 N*N 的分屏;
    // uv *= 3.0;
    // vec2 id = floor( uv );
    // vec2 f = fract( uv );
    // colorOutput.xy = f;

    // 
    uv *= 3.0;
    vec2 f = fract( uv );
    colorOutput = texture( iChannel1, uv ).xyz;
    gl_FragColor = vec4( colorOutput, 1.0 );
}

/*
    为什么使用 frac 能够实现N分屏的效果?
    首先一个 fragment shader 一次处理一个像素 
    然后这个像素是 X N 倍 的纹理坐标
    那么 使用 frac 函数获取了小数部分 (纹理坐标的取值范围是 [0, 1] ) 小数部分会有循环
    比如 N = 3;uv.y = 0.6; 那么 frac(uv.y * N ) = 0.8; 
    那么还是会获取 y = 0.8  这里的纹理
    在这个着色器中是把这个像素的颜色设置为 0.8
*/